<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>

        #app{width:500px;margin:50px auto;border:3px solid red;}
        .box{
           border:3px solid black;
           margin:5px;
        }
    </style>
</head>
<body>
  
    <div id="app">
        <h3 class="title">v-bind-绑定style</h3>
    
       <!-- 把对象的属性名和属性值直接设置到style中 -->
        <div class="box" :style="styleObj">
            1. 绑定对象
        </div>

        <!-- 把数组中的每一个元素（对象），取出来，组成style -->
        <div class="box" :style="styleArr">
            2. 绑定数组
        </div>
        <button @click="hBlack">改成黑色的字</button>
    </div>
    <script>
        // v-bind 是用来动态绑定元素的属性，而style也是元素的属性
        // 目标： 可以通过动绑定style来控制样式 。

        // 方式：
        // 1. 绑定对象
        // 2. 绑定数组

        const vm = new Vue({
            el: "#app",
            // el: document.getElementById("app"),
            data: {
                styleObj: {
                    color:'red',
                    // 如果属性名有-，则要加''
                    'background-color':'blue'
                },
                // 数组中的每一项都是一个对象，其中以键值对的格式设置了style
                styleArr:[ {color:'red','font-weight':'bold'}, {'font-size':'50px'} ]
            },
            methods: {
                hBlack () {
                    // 直接把styleObj中的color设置成black
                    this.styleObj.color = "black" 
                }
            }
        })
    </script>

</body>
</html>